{extend name="platform/base" /}
{block name="resources"/}
<style  type="text/css">
.error{
	font-size: 12px;
    line-height: 16px;
    color: red;
    margin-top: 10px;
	display:none;
}

</style>
 {/block}
{block name="main"}
<section class="panel panel-default">
	<header class="panel-heading font-bold"> 编辑广告位 </header>
	<div class="panel-body">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="color-red">*</span>名称</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_name" value="{$info['ap_name']}">
				</div>
					<p class="error">请输入广告位名称</p>
			</div>
			
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告位关键字：</label>
				
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_keyword" maxlength="60"  onkeyup="value=value.replace(/[^a-zA-Z]/ig,'')" onpaste="return false"  value="{$info['ap_keyword']}">
				</div>
				<p class="error">该关键字已被使用</p>
				
				<p style="color: #999;">广告位关键字可用来调用广告位，关键字必须为英文字符，不得超过60个字符，关键字不可以相同</p>	
			</div>
			
			
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">简介</label>
				<div class="col-md-4">
					<div id="editor" class="form-control" style="overflow:scroll;height:150px;max-height:150px">{$info['ap_intro']}</div>
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类别</label>
				<div class="col-md-4">
					<select id="ap_class" name="account" class="form-control m-b">
						<option value="0" {if condition="$info['ap_class'] eq 0"}selected{/if}>图片</option>
<!-- 						<option value="1" {if condition="$info['ap_class'] eq 1"}selected{/if}>文字</option> -->
<!-- 						<option value="2" {if condition="$info['ap_class'] eq 2"}selected{/if}>falsh</option> -->
					</select>
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
                                            <label class="col-sm-2 control-label">是否启用</label>
                                            <div class="col-sm-4">
                                                <label class="switch">
                                                    <input id="is_use" type="checkbox" {if condition="$info['is_use'] eq 1"}checked{/if}>
                                                    <span></span> </label>
                                            </div>
                                        </div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
                                            <label class="col-sm-2 control-label">所在位置类型</label>
                                            <div class="col-sm-10">
                                                <div class="radio col-sm-2">
                                                    <label>
                                                        <input type="radio" name="type" id="type1" value="1" {if condition="$info['type'] eq 1"}checked{/if}> pc端 </label>
                                                </div>
                                                <div class="radio col-sm-2">
                                                    <label>
                                                        <input type="radio" name="type" id="type2" value="2" {if condition="$info['type'] eq 2"}checked{/if}> 手机端 </label>
                                                </div>
												<div class="radio col-sm-2">
													<label>
														<input type="radio" name="type" id="type3" value="3" {if condition="$info['type'] eq 3"}checked{/if}> 员工端 </label>
												</div>
                                            </div>
                                        </div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
                                            <label class="col-sm-2 control-label"><span class="color-red">*</span>展示方式</label>
                                            <div class="col-sm-10">
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="ap_display" id="ap_display0" value="0" {if condition="$info['ap_display'] eq 0"}checked{/if}> 可以发布多条并幻灯展示 </label>
                                                </div>
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="ap_display" id="ap_display1" value="1" {if condition="$info['ap_display'] eq 1"}checked{/if}> 可以发布多条广告并随机展示 </label>
                                                </div>
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="ap_display" id="ap_display2" value="2" {if condition="$info['ap_display'] eq 2"}checked{/if}> 只允许发布并展示一条广告 </label>
                                                   <p class="error">请选择展示方式</p>
                                                </div>
                                            </div>
                                        </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label"><span class="color-red">*</span>宽度</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_width" value="{$info['ap_width']}">
				</div>
				<p class="error"></p>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label"><span class="color-red">*</span>高度</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_height" value="{$info['ap_height']}">
				</div>
				<p class="error"></p>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label"><span class="color-red">*</span>默认图片</label>
				<div class="col-md-2">
					<p class="imglogo-box"><img id="imgLogo" src="__UPLOAD__/{$info['default_content']}" class="imglogo"/></p>
                                            	<a href="javascript:void(0);" style="display:block;position:relative;z-index:1;">
                                            		<span style="width: 97px;height: 34px;position: absolute;left: 0;top: 0;z-index: 2;cursor: pointer;"> 
                                            		<input hidefocus="true" size="1" class="input-file" name="file_upload"
														id="uploadImg" nc_type="change_store_label" type="file" style="width: 97px;height: 34px;padding: 0;margin: 0;border: none 0;opacity: 0;filter: alpha(opacity = 0);cursor: pointer;"
														onchange="imgUpload(this);"> 
														<input type="hidden" id="Logo" value="{$info['default_content']}" />
													</span>
													<a class="btn btn-default"><i class="fa fa-cloud-upload text"></i><span class="text">上传图片</span></a>
												</a>
												<p class="error" id="img-error">请上传一张图片作为默认图片</p>
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label">默认图片背景色</label>
				<div class="col-md-2">
<!-- 					<input id="colorpicker" value="{$info['ap_background_color']}"/> -->
					<input type="color" class="form-control" id="colorpicker" value="{$info['ap_background_color']}" style="width:85px;">
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-2">
					<input type="hidden" id="ap_id" value="{$info['ap_id']}">
					<a href="javascript:void(0);" onclick="updatePlatformAdvPositionAjax()" class="btn btn-primary">保存</a>
				</div>
			</div>
		</form>
	</div>
</section>
<script>	

var ap_keyword_is_exists = false;
$("#ap_keyword").change(function(){
	var ap_keyword = $(this).val();
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/system/check_apkeyword')}",
		data : {"ap_keyword" : ap_keyword},
		success : function(data){
			if(data == 0){
				ap_keyword_is_exists = false;
			}else if(data > 0){
				ap_keyword_is_exists = true;
			}
		}
	})
})

//广告位类型
$("#ap_class").change(function(){
	if($(this).val() == 4){
		$(".data-image").hide();
	}else if($(this).val() == 0){
		$(".data-image").show();
	}
})
	/**
	*修改模块
	*/
	function updatePlatformAdvPositionAjax() {
		var ap_id = $("#ap_id").val();
		var ap_name = $("#ap_name").val();
		var ap_intro = $("#editor").html();
		var ap_class = $("#ap_class").val();
		if($("#is_use").prop("checked")){
			var is_use = 1;
		}else{
			var is_use = 0;
		}
		var ap_display = $("input[type='radio'][name='ap_display']:checked").val();
		var ap_width = $("#ap_width").val();
		var ap_height = $("#ap_height").val();
		var default_content = $("#Logo").val();
		var ap_background_color = $("#colorpicker").val();
		var type = $("input[type='radio'][name='type']:checked").val();
		var ap_keyword = $("#ap_keyword").val();
		if(verify(ap_name,ap_display,ap_width,ap_height)){
			$.ajax({
				type : "post",
				url : "{:__URL('PLATFORM_MAIN/config/updateplatformadvposition')}",
				data : {
					'ap_id' : ap_id,
					'ap_name' : ap_name,
					'ap_intro' : ap_intro,
					'ap_class' : ap_class,
					'is_use' : is_use,
					'ap_display' : ap_display,
					'ap_width' : ap_width,
					'ap_height' : ap_height,
					'default_content' : default_content,
					'ap_background_color' : ap_background_color,
					'type' : type,
					'ap_keyword' : ap_keyword
				},
				async : true,
				success : function(data) {
					if (data["code"] > 0) {
						showMessage('success', "编辑成功",'{:__URL('PLATFORM_MAIN/config/platformadvpositionlist')}');
					}else{
						showMessage('error', "编辑失败");
					}
				}
			});
		}	
	}

	/**
	*模块输入信息验证
	*/
	function verify(ap_name,ap_display,ap_width,ap_height){
		var reg =  /^\d+$/;
		// 名称
		if(ap_name.length == 0){
			$("#ap_name").parent().next(".error").show();
			$("#ap_name").focus();
			return false;
		}else{
			$(".error").hide();
		}
		// 展示方式
		if(ap_display == undefined){
			$("#ap_display2").parent().next(".error").show();
			return false;
		}else{
			$(".error").hide();
		}
		// 宽度
		if($.trim(ap_width) == ''){
			$("#ap_width").parent().next(".error").html('请输入导航宽度').show();
			$("#ap_width").focus();
			return false;
		}else if(!reg.test(ap_width)){
			$("#ap_width").parent().next(".error").html('导航宽度必须是正整数').show();
			$("#ap_width").focus();
			return false;
		}else{
			$(".error").hide();
		}
		// 高度
		if($.trim(ap_height) == ''){
			$("#ap_height").parent().next(".error").html('请输入导航高度').show();
			$("#ap_height").focus();
			return false;
		}else if(!reg.test(ap_height)){
			$("#ap_height").parent().next(".error").html('导航高度必须是正整数').show();
			$("#ap_height").focus();
			return false;
		}else{
			$(".error").hide();
		}
		// logo图片
		if($("#Logo").val().length ==0){
			$("#img-error").show();
			return false;
		}else{
			$(".error").hide();
		}
		return true;
	}
	/**
	 *图片上传
	 */
	function imgUpload(event) {
		var fileid = $(event).attr("id");
		var data = { 'file_path' : UPLOADADV };
		uploadFile(fileid,data,function(res){
			if(res.code){
				$("#imgLogo").attr("src","__UPLOAD__/"+res.data);
				$("#Logo").val(res.data);
				showTip(res.message,"success");
				$('#img-error').hide();
			}else{
				showTip(res.message,"error");
			}
		});
	}
	
	// 用户在输入的时候就让错误提示隐藏
	$("input").bind('keydown',function(){
		$(this).parents('.form-group').find('.error').hide();
	});
	
	$('input[name="ap_display"]').bind('click',function(){
		$(this).parents('.form-group').find('.error').hide();
	});
</script>
{/block}